<template>
  <div>
    <van-tabbar v-model="active">
      <!-- 首页 -->
      <van-tabbar-item to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/Ther">
        <span>通讯录</span>
        <template #icon="props">
          <img :src="props.active ? communication.active : communication.inactive"/>
        </template>
      </van-tabbar-item>
      <!-- 我 -->
      <van-tabbar-item to="/my">
        <span>我</span>
        <template #icon="I">
          <img :src="I.active ? my.active : my.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    
  </div>
</template>

<script>
export default {
  name: "Footers",
  data() {
    return {
      active: 0,
      icon: {
        active: "https://s1.ax1x.com/2022/10/11/xtLJSI.png",
        inactive: 'https://s1.ax1x.com/2022/10/11/xtX0Rs.png',
      },
      communication:{
        active: "https://s1.ax1x.com/2022/10/24/x2GCrj.png",
        inactive: 'https://s1.ax1x.com/2022/10/24/x28f56.png',
      },
      my:{
        active: "https://s1.ax1x.com/2022/10/11/xtXwGj.png",
        inactive: 'https://s1.ax1x.com/2022/10/11/xtLH6x.png',
      } 
    };
  },
};
</script>

<style scoped>
*{
  background: #ffffff;
  
}
.home{
    background: #000;
  }


</style>